import React, { Component } from "react";
import { Button, Modal, Tooltip, message } from "antd";
import { connect } from "dva";
import { SearchOutlined } from "@ant-design/icons";
import QrCode from "qrcode-reader";
import styles from "./style.less";
import codePng from "./code.jpg";
import QRCode from "qrcode.react";
import Request, { Delete, Get } from "@/utils/request";
import LogoPng from "@/assets/images/logo.png";
@connect(({ mShanghuAnddhlb }) => mShanghuAnddhlb)
class Page extends Component {
  state = {
    id: this.props.match.params.id,
    detail: null,
    can: false
  };
  componentDidMount() {
    document.getElementById("root").style.minWidth = window.screen.width + "px";
    document.getElementById("root").style.width = window.screen.width + "px";
    console.log(this.state.id);
    this.getInfo();
    const { dispatch } = this.props;
    dispatch({
      type: "mShanghuAnddhlb/fetch"
    });
  }
  exchange() {
    ajaxRequest(
      "get",
      "https://skp.dingplayer.com/sys/hexiao.txt?random" + Math.random(),
      data => {
        console.log("请求txt结果为:" + data);
        if (data == "0") {
          message.error("核销已结束");
          return;
        }
        if (this.state.detail.prize_state == "未使用") {
          Modal.confirm({
            title: "兑现",
            content: "确认兑现吗？",
            okText: "确认",
            cancelText: "取消",
            onOk: () => {
              Request("/psy/mss/lottery/exchange", {
                sha: this.state.id
              }).then(() => {
                message.success("兑现成功,2s后返回");
                this.getInfo();

                setTimeout(() => {
                  window.location.href =
                    window.location.origin + "/#/shanghuclient/dhlb/";
                }, 2000);
              });
            }
          });
        }
      }
    );
  }
  getInfo() {
    Get("/psy/mss/prize/get/" + this.state.id, {}).then(res => {
      let data = res.data;
      data["prize"]["explain"] = data["prize"]["explain"].replace(
        /\n/g,
        "<br />"
      );
      data["prize"]["explain"] = data["prize"]["explain"].replace(
        /\r/g,
        "<br />"
      );
      data["prize"]["explain"] = data["prize"]["explain"].replace(
        /\r\n/g,
        "<br />"
      );
      this.setState({
        detail: res.data
      });
    });
  }
  render() {
    const { text } = this.props;
    const { detail } = this.state;
    return (
      <div className={styles.container}>
        <img
          className={styles.logopng}
          onClick={() => {
            window.location.href =
              window.location.origin + "/#/shanghuclient/dhlb/";
          }}
          src={LogoPng}
        />
        {detail ? (
          <div className={styles.wrap}>
            <div className={styles.jpTitle}>奖品信息</div>
            {/* <div className={styles.codeWrap}>
              <QRCode
                value={this.state.id} //value参数为生成二维码的链接
                size={200} //二维码的宽高尺寸
                fgColor="#000000" //二维码的颜色
              />
            </div> */}
            <div
              className={
                detail.prize_state == "已使用" ? styles.jpName1 : styles.jpName
              }
            >
              {detail.prize.name}
            </div>
            <div
              className={
                detail.prize_state == "已使用"
                  ? styles.jpStatus1
                  : styles.jpStatus
              }
              onClick={() => this.exchange()}
            >
              {detail.prize_state == "未使用" ? "兑现" : detail.prize_state}
            </div>
            <div
              className={styles.jpSAddress}
              dangerouslySetInnerHTML={{ __html: detail["prize"]["explain"] }}
            ></div>
          </div>
        ) : (
          <div></div>
        )}
      </div>
    );
  }
}

export default Page;

function ajaxRequest(type, url, callback) {
  var type = type,
    url = url,
    callback = callback;

  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open(type, url, true);
  xmlhttp.send(null);
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
      if (xmlhttp.status == 200) {
        callback(json_encode(xmlhttp.responseText));
      }
    }
  };
}

function json_encode(txt) {
  return txt;
}
